<template>
  <f7-page>
    <f7-navbar :title="$t('history.title')" :back-link="$t('common.back')"></f7-navbar>
    <div id="lbsmap">
        <lbs-map  :maptype="$store.state.map.type" :lang="lang" :center="$store.state.map.center" :zoom="$store.state.map.zoom">
          <lbs-move
          :name="$store.state.devices.list[$store.state.devices.index[$store.state.devices.selectId]].name"
          :pause="this.control.pause"
          :begin="this.control.begin"
          :speed="this.control.speed"
          :posdata="posdata"
          startIcon="http://base.gpsbd.com/static/icon/startpoint.png"
          endIcon="http://base.gpsbd.com/static/icon/endpoint.png"
          stopIcon="http://base.gpsbd.com/static/icon/stoppoint.png"
          @progress="playstate"
          :runStep="this.control.runStep"
            :filterlbs="this.control.filterlbs"
          ></lbs-move>
        </lbs-map>

       <div class="control">
         <f7-row>
          <f7-col  width="25"><f7-button round  @click="controlPlay"><f7-icon :f7="this.control.pause?'play':'pause'"></f7-icon></f7-button></f7-col>
          <f7-col  width="25"><f7-range @range:change="onSpeedChange" :min="1" :max="10" :step="1" :value="control.speed" :label="true" color="orange"></f7-range></f7-col>
          <f7-col width="50"><f7-range @range:change="onProgressChange" :min="1" :max="191" :step="1" :value="control.index" :label="true" color="orange" ></f7-range></f7-col>
        </f7-row>



       </div>

    </div>
  </f7-page>
</template>

<script>
  import { getHistorys } from '@/api/api';
export default {
  data: function() {
          return {
            lang:'zh-CN',
            posdata:[],
            control:{
          		begin:false,
          		pause:false,
          		speed:1,
          		index:0,
          		total:100,
          		runStep:1,
              filterlbs:false,
          	},

          }
        },
  methods:{
    loadHistory(query){

						var parms = {
							id:this.$store.state.devices.selectId,
							start:query.startTime,
							end:query.endTime
						}
            this.posdata =[];
            this.control.begin = false;
            this.control.runStep = 1;
            this.control.speed = 1;


            getHistorys(parms).then(data=>{
              if(data.length==0){
                this.$f7.toast.create({
                   text:this.$store.state.devices.list[this.$store.state.devices.index[this.$store.state.devices.selectId]].name+this.$t('history.noHistory'),
                   closeTimeout: 2000,
                 }).open();
                return;
              }
                var _this = this;
              setTimeout(function(){
                _this.posdata = data;
                _this.control.total =  data.length;
              },500)
              this.control.begin = true;

						});
				},
        playstate(val){
          this.control.index = val.index;
          this.control.runStep = val.index;
        },
        onSpeedChange(values){
            this.control.speed = values;
        },
        onProgressChange(values){
            this.control.runStep = values;
        },
        controlPlay(){
          if(this.control.pause){
            this.control.pause=false;
          }else{
            this.control.pause=true;
          }
        }

  },
  created(){
      if(this.$store.state.global.lang=='zh_CN'){
        this.lang='zh-CN'
      }else{
        this.lang = this.$store.state.global.lang
      }
  },
  mounted () {
      this.loadHistory(this.$f7route.query);
      var _this = this;
      this.$$(document).on('page:beforeremove', function (e) {
            _this.posdata =[];
            _this.control.begin = false;
            _this.control.pause = true;
      })
    },
}
</script>
<style>
  .lbspopup {
    margin: -125px -79px;
      top: -12px!important;
    font-size: 12px;
    padding: 4px;
  }
.lbspopup:before, .lbspopup:after{
  left:53px;
}
.control{
  position: fixed;
    bottom: 0px;
    width: 93%;
    padding: 10px;
}
.paddtop{
  padding-top: 8px;
}
</style>
